<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            width: 60%;
            padding: 60px 0;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            user-select: none;
            font: 14px / 1 Helvetica, sans-serif;
        }

        input[type="radio"] {
            display: none;
        }

        input[type="radio"] + label {
            display: inline-flex;
            align-items: center;
            position: relative;
            user-select: none;
            cursor: pointer;
        }
        /* 给label添加伪元素，展示我们自定义的⭕ */
        input[type="radio"] + label::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 8px;
            vertical-align: top;
            margin-right: .2rem;
            border: 1px solid #ccc;
            background-color: #fff;
            /* transition: border-color .2s ease-in-out, background-color .2s ease-in-out; */
        }

        input[type="radio"] + label::after {
            content: "";
            position: absolute;
            width: 4px;
            height: 4px;
            left: 4px;
            top: calc(50% - 2px);
            background-color: #fff;
            border-radius: 50%;
            /* transition: transform .2s ease-in-out; */
        }
        input[type="radio"]:checked + label::before {
            background-color: #b4a078;
            border-color: #b4a078;
        }

        input[type="radio"]:not(:disabled) + label:hover::before {
            border-color: #b4a078;
        }

        input[type="radio"]:disabled + label {
            cursor: not-allowed;
            color: #999;
        }
        input[type="radio"]:disabled + label::before {
            background-color: #f2f2f2;
        }
        input[type="radio"]:disabled + label::after {
            background-color: #f2f2f2;
        }

        input[type="radio"]:disabled:checked + label:before{
            border-color: #ccc;
        }
        input[type="radio"]:disabled:is(:checked) + label::after {
            background-color: #ccc;
        }   
    </style>
</head>

<body>
    <main>
        <input type="radio" id="radio0" name="radio">
        <label for="radio0">Vue</label>
        <input type="radio" id="radio1" name="radio" checked>
        <label for="radio1">React</label>
        <input type="radio" id="radio3" name="radio">
        <label for="radio3">Angular</label>
        <input type="radio" id="radio4" name="radio1" disabled>
        <label for="radio4">禁用</label>
        <input type="radio" id="radio5" name="radio1" disabled checked>
        <label for="radio5">选中禁用</label>
    </main>
</body>

</html>